<template>
  <!-- 产品下的药食同源 -->
  <div>
      <div class="banner">药食同源 寓医于食<span></span></div>
      <main>
          <Title title="系列产品" text="Series of products" />
          <div class="page">
              <ul>
                  <li>
                        <div><img src="@/img/productThimg/texiao.png" alt=""></div>                        
                        <p>特效药</p>
                  </li>
                  <li>
                        <div><img src="@/img/productThimg/baojian.png" alt=""></div>                        
                        <p>保健产品</p>
                  </li>
                  <li>
                        <div><img src="@/img/productThimg/yimei.png" alt=""></div>                        
                        <p>医美产品</p>
                  </li>
                  <li>
                        <div><img src="@/img/productThimg/waifu.png" alt=""></div>                        
                        <p>外敷药剂</p>
                  </li>
                  <li>
                        <div><img src="@/img/productThimg/zhongyao.png" alt=""></div>                        
                        <p>中医处方</p>
                  </li>
                  <li>
                        <div><img src="@/img/productThimg/shiwu.png" alt=""></div>                        
                        <p>古法汤煲</p>
                  </li>
              </ul>
              <dl>
                  <dd>
                      <h3><span></span>辅助治疗慢性病</h3>
                      <p>针对不同群体定制个性化调养产品，并由国药监制生产，产品性平和安全，可以久服，且对慢性病如糖尿病、心血管病、癌症以及产后恢复等也具有辅助治疗的作用。</p>
                  </dd>
                  <dt>
                      <img src="@/img/productThimg/pic.png" alt="">
                  </dt>
              </dl>
          </div>
          <Title title="携手北京同仁堂推出" title1="覆盖2600种病食产品" />
          <div class="foot">
              <div>
                  <h4>2600<span>种</span></h4>
                  <p>高达</p>
              </div>           
            <ol>
                <li>妇科</li>
                <li>五官科</li>
                <li>骨伤科</li>
                <li>心脑血管</li>
                <li>呼吸科</li>
                <li>儿科</li>
            </ol>
        </div>
      </main>      
  </div>
</template>

<script>
import Title from '../../components/Title'
export default {
    components: {
        Title
    }
}
</script>

<style lang="scss" scoped>
.banner{
    height: 600px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 50px;
    font-weight: 600;
    background-size: 100%;
    position: relative;
    line-height: 300px;
    background: url(../../img/productThimg/yaoshitongyuan.png) no-repeat;
    span{
        background: #fff;
            position: absolute;
            width: 180px;
            height: 4px;
            left: 50%;
            margin-left: -90px;
            top: 220px;
    }
}
main{
    background: #2b45a4;
    width: 100%;
    padding: 80px 0 270px;
    position: relative;
    z-index: 2;
    color: #fff;
    &::before{
        content: "";
        position: absolute;
        width: 120%;
        height: 300px;
        border-radius: 50%;
        left: -10%;
        top: -150px;
        background: #2b45a4;
        z-index: -1;
    }
    ul{
        display: flex;
        text-align: center;        
        flex-wrap: wrap;
        li{
            width: 430px;
            padding: 50px 0;
            p{
                line-height: 100px;
                font-size: 30px;
            }
            div{
                width: 200px;
                height: 200px;
                border-radius: 50%;
                background: #446cfe;
                line-height: 200px;
                margin: 0 auto;
                cursor: pointer;
                &:hover{
                    background: #65fdf4;
                }
            }
        }
    }
    dl{
        display: flex;
        align-items: center;
        background: #446cfe;
        margin-bottom: 100px;
        dt{
            width: 880px;
            img{
                width: 100%;
            }
        }
        dd{
            flex: 1;
            padding: 0 30px;
            h3{
                font-size: 30px;
                line-height: 100px;
                font-weight: 600;
                position: relative;
                span{
                    position: absolute;
                    width: 90px;
                    height: 4px;
                    background: #65fdf4;
                }
            }
            p{
                line-height: 40px;
                cursor: pointer;
                &:hover{
                    color: #2d49ac;
                }
            }
        }
    }
}
.foot{
    width: 440px;
    height: 440px;
    background: url(../../img/productThimg/liubianxing.png) no-repeat;
    background-size: 100%;
    margin: 0 auto;
    margin-top: 200px;
    position: relative;
    cursor: pointer;
    div{
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        z-index: 2;
        &:hover+ol li{            
            opacity: 1;
        }
        
        h4{
            font-size: 60px;
            font-weight: 600;
            padding-top: 130px;
            span{
                font-size: 20px;
                padding-left: 5px;
            }
        }
        p{
            font-size: 36px;
            font-weight: 550;
        }
    }
    ol{
        position: absolute;
        width: 60px;
        height: 60px;
        top: 190px;
        left: 190px;
        text-align: center;
    }
    li{
        width: 70px;
        height: 70px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
        left: 0;
        font-size: 20px;
        position: absolute;
        background: url(../../img/productThimg/liubianxing.png) no-repeat;
        background-size: 100%;        
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s linear;
        &::after{
            content: "";
            position: absolute;
            top: 80px;
            width: 4px;
            height: 60px;
            background: #446cfe;
            transform-origin: -2px -50px;
        }
        &:nth-child(1){
            transform: rotate(-30deg) translateY(-370px) rotate(30deg);
            &::after{
                transform: rotate(-30deg);
            }
        }
        &:nth-child(2){
            transform: rotate(30deg) translateY(-370px) rotate(-30deg);
            transition-delay: 0.3s;
            &::after{
                transform: rotate(30deg);
            }
        }
        &:nth-child(3){
            transform: rotate(90deg) translateY(-370px) rotate(-90deg);
            transition-delay: 0.6s;
            margin-top: -25px;
            &::after{
                transform: rotate(90deg);
            }
        }
        &:nth-child(4){
            transform: rotate(150deg) translateY(-370px) rotate(-150deg);  
            &::after{
                transform: rotate(150deg);
            }          
        }
        &:nth-child(5){
            transform: rotate(210deg) translateY(-370px) rotate(-210deg);
            transition-delay: 0.3s;
            &::after{
                transform: rotate(-150deg);
            }
        }
        &:nth-child(6){
            transform: rotate(270deg) translateY(-370px) rotate(-270deg);
            transition-delay: 0.6s;
            margin-top: -25px;
            &::after{
                transform: rotate(-90deg);
            }
        }
    }
}
</style>